<!-- 我的页面首页头部 -->
<template>
  <div>
    <div class="head">
      <!-- 头像 -->
      <van-image
          v-if="role.flag==1"
        round
        width="100px"
        height="100px"
        :src="role.avater"
      />
      <!-- 名字 -->
      <div class="name" v-if="role.flag==1">
        <p >{{role.username}}</p>
        <div>
          拥有积分:
          <p style="padding-top: 4px;padding-left: 4px">{{role.score}}</p>
        </div>
      </div>

      <van-image
          v-if="role.flag!=1"
          round
          width="100px"
          height="100px"
          :src="role.avater"
      />
      <!-- 名字 -->
      <div class="name" v-if="role.flag!=1">
        <p @click="login">登录/注册</p>
      </div>

      <!-- 个人主页入口 -->
      <div class="myenter">
        <router-link :to="{
          path:'/homeview/my/mypage/personalPage',
          /*query: {
           url: this.role.avater
          }*/
        }">
          <div>
            个人主页
            <van-icon name="arrow" />
          </div>

        </router-link>
      </div>
    </div>

    <!-- 占位符 -->
    <router-view />
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  data() {
    return {
      role: {
        name: '诸葛亮',
        avater: '/images/background/leaf.jpg',
        score: 10,
        flag: 0
      }
    }
  },
  computed: {
    ...mapState(['userinfo'])
  },
  created(){
    if(this.userinfo != null){
      console.log(this.userinfo)
      this.role = this.userinfo
      this.role.flag = 1
      this.role.avater = '/images/background/leaf.jpg'

    }
    console.log("asdfasdfasdfasdf",this.userinfo)
    //获取积分
    this.axios.get("http://localhost:10002/ums/userDetail/score/"+
        this.userinfo.id).then(response =>{
      if(response.data.state==200){
        this.role.score = response.data.data
        console.log("积分",response.data.data)
      }else {
        console.log("意外",response.data.data)
      }
    })
  },
  methods: {
    login() {
      this.$router.push("/login")
    }
  }
};
</script>

<style scoped>
.head {
  display: flex;
  padding: 25px 15px 10px 15px;
  justify-content: space-between;
  align-content: center;
}
.name {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-content: center;
}
.name p {
  font-size: 24px;
  padding: 5px 5px;
}
.name div {
  display: flex;
  width: 121px;
  height: 36px;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  border-radius: 15px;
  background-color: #fcf4b1;
}
.name div p {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  color: #ff8d1a;
}
.myenter {
  padding: 0 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  color: #a6a6a6;
}
</style>